<script lang="ts" setup>
import {IExistIssue, IHealthEvaluation, ILifeStyle} from "@/model";
import {computed, reactive, ref, toRaw, watch} from "vue";
import {ElForm} from "element-plus";
import {tjwx} from "@/dict";
import formUtils from "./formUtils";
import {cloneDeep} from "lodash-es";

const formSource = reactive(tjwx);
const props = defineProps<{
  healthEvaluation: Partial<IHealthEvaluation>;
  isVisible: boolean,
  getLifeStyleData: Function,
  getExistIssueData: Function
}>();
watch(() => props.isVisible, (val) => {
  if (val) {
    console.log("健康问题激活了")
    const lifeStyleData = props.getLifeStyleData();
    const existIssueData = props.getExistIssueData();
    setLifeStyleDataAdapter(lifeStyleData);
    setExistIssueData(existIssueData)
  }
})

const disabledRef = reactive({
  "a00_04_175_4": false,
  "a00_04_175_1":false,
  "a00_04_175_2":false
})

function setLifeStyleDataAdapter(object: ILifeStyle) {
  if (!formModel.value.a00_04_174) {
    formModel.value.a00_04_174 = []
  }
  if (!formModel.value.a00_04_175) {
    formModel.value.a00_04_175 = []
  }
  if (object.a00_04_24.includes("1")) {
    const a00_04_174_5 = formModel.value.a00_04_174.findIndex((val) => val === "5");
    if (a00_04_174_5 && a00_04_174_5 !== -1) {
      // a00_04_24 1  a00_04_174 不包含5 	a00_04_175  不包含4  4 disabled=true
      formModel.value.a00_04_174.splice(a00_04_174_5, 1)
    }
    const a00_04_175_4 = formModel.value.a00_04_175.findIndex((val) => val === "4")
    if (a00_04_175_4 && a00_04_175_4 !== -1) {
      formModel.value.a00_04_175.splice(a00_04_175_4, 1)
    }
    disabledRef.a00_04_175_4 = true
  }
  if (object.a00_04_24.includes("2") || object.a00_04_24.includes("3") || object.a00_04_24.includes("4")) {

    if (!formModel.value.a00_04_174.includes("5")) {
      formModel.value.a00_04_174.push("5")
    }
    if (!formModel.value.a00_04_175.includes("4")) {
      formModel.value.a00_04_175.push("4")
    }
    disabledRef.a00_04_175_4 = false
  }
  if (object.a00_04_28.includes("3") || object.a00_04_28.includes("4") || object.a00_04_28.includes("5")) {
    if (!formModel.value.a00_04_175.includes("3")) {
      formModel.value.a00_04_175.push("3")
    }
  }
  if (object.a00_04_28.includes("0") || object.a00_04_28.includes("1") || object.a00_04_28.includes("2")) {
    const a00_04_175_3=formModel.value.a00_04_175.findIndex((item)=>item==="3")
    if (a00_04_175_3!==-1) {
      formModel.value.a00_04_175.splice(a00_04_175_3,1)
    }
  }
  if(object.a00_04_29.includes("1")||object.a00_04_29.includes("2")){
    const a00_04_175_1=formModel.value.a00_04_175.findIndex((item)=>item==="1")
    if(a00_04_175_1===-1){
      formModel.value.a00_04_175.push("1")
      
    }
    disabledRef.a00_04_175_1=false
  }
  if(object.a00_04_29.includes("0")){
    const a00_04_175_1=formModel.value.a00_04_175.findIndex((item)=>item==="1");
    if(a00_04_175_1!==-1){
      formModel.value.a00_04_175.splice(a00_04_175_1,1)
    }
    disabledRef.a00_04_175_1=true
  }

  if(object.a00_04_33.includes("1")||object.a00_04_33.includes("2")||object.a00_04_33.includes("3")){
    if(!formModel.value.a00_04_175.includes("2")){
      formModel.value.a00_04_175.push("2")
    }
    disabledRef.a00_04_175_2=false
  }
  if(object.a00_04_33.includes("0")){
    const a00_04_175_2=formModel.value.a00_04_175.findIndex((item)=>item==="2");
    if(a00_04_175_2!==-1){
      formModel.value.a00_04_175.splice(a00_04_175_2,1)
    }
    disabledRef.a00_04_175_2=true
  }
}

function setExistIssueData(object: IExistIssue) {
  let a00_04_155Name: Array<string> = [];
  if (
    object.a00_04_155 &&
    object.a00_04_155.length > 0 &&
    object.a00_04_155[0] !== "1"
  ) {
    a00_04_155Name = object.a00_04_155
      .filter((item) => {
        return formSource.a00_04_155[item] !== "其他";
      })
      .map((item) => formSource.a00_04_155[item]);
  }
  let a00_04_157Name: Array<string> = []
  if (
    object.a00_04_157 &&
    object.a00_04_157.length > 0 &&
    object.a00_04_157[0] !== "1"
  ) {
    a00_04_157Name = object.a00_04_157
      .filter((item) => {
        return formSource.a00_04_157[item] !== "其他";
      })
      .map((item) => {
        return formSource.a00_04_157[item];
      });
  }
  let a00_04_159Name: Array<string> = []
  if (
    object.a00_04_159 &&
    object.a00_04_159.length > 0 &&
    object.a00_04_159[0] !== "1"
  ) {
    a00_04_159Name = object.a00_04_159
      .filter((item) => {
        return formSource.a00_04_159[item] !== "其他";
      })
      .map((item) => {
        return formSource.a00_04_159[item];
      });
  }
  let a00_04_161Name: Array<string> = []
  if (
    object.a00_04_161 &&
    object.a00_04_161.length > 0 &&
    object.a00_04_161[0] !== "1"
  ) {
    a00_04_161Name = object.a00_04_161
      .filter((item) => {
        return formSource.a00_04_161[item] !== "其他";
      })
      .map((item) => {
        return formSource.a00_04_161[item];
      });
  }
  let a00_04_163Name: Array<string> = []
  if (
    object.a00_04_163 &&
    object.a00_04_163.length > 0 &&
    object.a00_04_163[0] !== "1"
  ) {
    a00_04_163Name = object.a00_04_163
      .filter((item) => {
        return formSource.a00_04_163[item] !== "其他";
      })
      .map((item) => {
        return formSource.a00_04_163[item];
      });
  }

  const val: Array<string> = [...a00_04_155Name, ...a00_04_157Name, ...a00_04_159Name, ...a00_04_161Name, ...a00_04_163Name];
  if (val.length > 0) {
    formModel.value.a00_04_169 = "2";
    formModel.value.a00_04_170 = val[0] || "";
    formModel.value.a00_04_171 = val[1] || "";
    formModel.value.a00_04_172 = val[2] || "";
    formModel.value.a00_04_173 = val[3] || "";
    formModel.value.a00_04_203 = val[4] || "";
    formModel.value.a00_04_204 = val[5] || "";
    if (val.length > 6) {
      var a00_04_219 = val.splice(5, val.length);
      formModel.value.a00_04_219 = "," + a00_04_219.join(",");
    } else {
      formModel.value.a00_04_219 = "";
    }
  } else {
    formModel.value.a00_04_169 = "1";
    formModel.value.a00_04_170 = "";
    formModel.value.a00_04_171 = "";
    formModel.value.a00_04_172 = "";
    formModel.value.a00_04_173 = "";
    formModel.value.a00_04_203 = "";
    formModel.value.a00_04_204 = "";
    formModel.value.a00_04_219 = "";
  }
}


// watch(
//   [
//     a00_04_163Name,
//     a00_04_155Name,
//     a00_04_157Name,
//     a00_04_159Name,
//     a00_04_161Name,
//   ],
//   (val) => {
//     var data: Array<string> = [];
//     val.forEach((item) => {
//       if (item && item.length > 0) {
//         data = [...data, ...item];
//       }
//     });
//   }
// );
// watch(
//   () => props.existList,
//   (val) => {

// );
const formModel = ref(cloneDeep(props.healthEvaluation));
// watch(
//   () => {
//     return props.healthEvaluation;
//   },
//   (val) => {
//     formModel.value = val;
//   }
// );
const addRow = () => {
  formModel.value.nonImmunization?.push({
    a00_044_03: "",
    a00_044_04: "",
    a00_044_05: "",
  });
};
const removeRow = (index) => {
  formModel.value.nonImmunization?.splice(index, 1);
};
console.log(formModel);
const formRef = ref<InstanceType<typeof ElForm>>();
const validateForm = () => {
  return formRef.value?.validate();
};
const getData = () => {
  return toRaw(formModel.value);
};
const {handleStringExcludeClear, handleArrayExcludeClear} =
  formUtils(formModel);

defineExpose({validateForm, getData});
</script>


<template>
  <ElCard header="健康评价">
    <el-form :model="formModel" ref="formRef" :show-message="false"  size="small">
      <CardBox header="非免疫规划预防接种史">
        <ElButton type="primary" @click="addRow">
          <el-icon>
            <CirclePlus/>
          </el-icon>
        </ElButton>
        <ElTable :data="formModel.nonImmunization" border style="width: 100%">
          <ElTableColumn label="名称">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`list.${$index}.a00_044_03`">
                <ElInput v-model="row.a00_044_03"/>
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="接种日期">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`list.${$index}.a00_044_04`">
                <ElDatePicker
                  type="date"
                  v-model="row.a00_044_04"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="接种机构">
            <template #default="{ row, $index }">
              <ElFormItem :prop="`list.${$index}.a00_044_05`">
                <ElInput v-model="row.a00_044_05"/>
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" width="55px">
            <template #default="{ $index }">
              <ElButton type="danger" @click="removeRow($index)" style="width: 20px">删</ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </CardBox>
      <CardBox header="健康评价">
        <ElFormItem prop="a00_04_169">
          <ElRadioGroup
            v-model="formModel.a00_04_169"
            @change="
              handleStringExcludeClear($event, '2', [
                'a00_04_170',
                'a00_04_171',
                'a00_04_172',
                'a00_04_173',
                'a00_04_203',
                'a00_04_204',
                'a00_04_219',
              ])
            "
          >
            <ElRadio
              v-for="(item, key) in formSource.a00_04_169"
              :key="key"
              :label="key"
            >{{ item }}
            </ElRadio
            >
          </ElRadioGroup>
        </ElFormItem>
        <br/>
        <ElFormItem label="异常一" style="width: 40%">
          <ElInput
            v-model="formModel.a00_04_170"
            
            show-word-limit
            :disabled="formModel.a00_04_169 !== '2'"
          />
        </ElFormItem>
        <ElFormItem label="异常二" style="width: 40%">
          <ElInput
            v-model="formModel.a00_04_171"
            
            show-word-limit
            :disabled="formModel.a00_04_169 !== '2'"
          />
        </ElFormItem>
        <ElFormItem label="异常三" style="width: 40%">
          <ElInput
            v-model="formModel.a00_04_172"
            
            show-word-limit
            :disabled="formModel.a00_04_169 !== '2'"
          />
        </ElFormItem>
        <ElFormItem label="异常四" style="width: 40%">
          <ElInput
            v-model="formModel.a00_04_173"
            
            show-word-limit
            :disabled="formModel.a00_04_169 !== '2'"
          />
        </ElFormItem>
        <ElFormItem label="异常五" style="width: 40%">
          <ElInput
            v-model="formModel.a00_04_203"
            
            show-word-limit
            :disabled="formModel.a00_04_169 !== '2'"
          />
        </ElFormItem>
        <ElFormItem label="异常六" style="width: 40%">
          <ElInput
            v-model="formModel.a00_04_204"
            
            show-word-limit
            :disabled="formModel.a00_04_169 !== '2'"
          />
        </ElFormItem>
        <ElFormItem label="其他异常" style="width: 90%">
          <ElInput
            type="textarea"
            v-model="formModel.a00_04_219"
            :disabled="formModel.a00_04_169 !== '2'"
          />
        </ElFormItem>
      </CardBox>
      <CardBox header="健康指导">
        <ElFormItem prop="a00_04_174">
          <ElCheckboxGroup v-model="formModel.a00_04_174">
            <ElCheckbox
              v-for="(value, key) in formSource.a00_04_174"
              :key="key"
              :label="key"
            >{{ value }}
            </ElCheckbox
            >
          </ElCheckboxGroup>
        </ElFormItem>
      </CardBox>
      <CardBox header="危险因素控制">
        <ElFormItem prop="a00_04_175">
          <ElCheckboxGroup
            v-model="formModel.a00_04_175"
            @change="
              handleArrayExcludeClear($event, '7', ['a00_04_178']),
                handleArrayExcludeClear($event, '6', ['a00_04_177']),
                handleArrayExcludeClear($event, '5', ['a00_04_176'])
            "
          >
            <ElCheckbox :key="1" label="1" :disabled="disabledRef.a00_04_175_1">戒烟</ElCheckbox>
            <ElCheckbox :key="2" label="2" :disabled="disabledRef.a00_04_175_2">健康饮酒</ElCheckbox>
            <ElCheckbox :key="3" label="3">饮食</ElCheckbox>
            <ElCheckbox :key="4" label="4" :disabled="disabledRef.a00_04_175_4">锻炼</ElCheckbox>
            <ElCheckbox :key="5" label="5">减体重</ElCheckbox>
            <ElFormItem
              label="目标"
              prop="a00_04_176"
              :required="formModel.a00_04_175?.includes('5')"
            >
              <ElInput
                v-model="formModel.a00_04_176"
                :disabled="!formModel.a00_04_175?.includes('5')"
              >
                <template #append>Kg</template>
              </ElInput>
            </ElFormItem>
            <ElCheckbox :key="6" label="6">建议疫苗接种</ElCheckbox>
            <ElFormItem
              label=" "
              prop="a00_04_177"
              :required="formModel.a00_04_175?.includes('6')"
            >
              <ElInput
                v-model="formModel.a00_04_177"
                :disabled="!formModel.a00_04_175?.includes('6')"
              />
            </ElFormItem>
            <ElCheckbox :key="7" label="7">其他</ElCheckbox>
            <ElFormItem
              label=" "
              prop="a00_04_178"
              :required="formModel.a00_04_175?.includes('7')"
            >
              <ElInput
                v-model="formModel.a00_04_178"
                :disabled="!formModel.a00_04_175?.includes('7')"
              />
            </ElFormItem>
          </ElCheckboxGroup>
        </ElFormItem>
      </CardBox>
      <CardBox header="体检类型">
        <ElFormItem prop="a00_04_174">
          <ElRadioGroup v-model="formModel.a00_04_215">
            <ElRadio
              v-for="(value, key) in formSource.a00_04_215"
              :key="key"
              :label="key"
            >{{ value }}
            </ElRadio
            >
          </ElRadioGroup>
        </ElFormItem>
      </CardBox>
    </el-form>
  </ElCard>
</template>


<style scoped></style>
